<%--
  Created by IntelliJ IDEA.
  User: 13585
  Date: 2020/12/23
  Time: 8:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="top.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>会议室预约</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="apply">
    <div class="title">会议室预约</div>
    <div class="content">
        <c:if test="${!empty msg}">
            <div id="prompt">
                <span>${msg}</span>
                <button class="btn" onclick="changeDis()">确定</button>
            </div>
        </c:if>
        <script>
            function changeDis() {
                let msg = document.getElementById("prompt");
                msg.style.display = "none";
            }
        </script>
        <form class="form-horizontal" action="addApply" method="post">
            <div class="form-group">
                <label class="col-sm-3 control-label">会议室:</label>
                <div class="dropdown col-sm-3">
                    <select id="meetingList" class="form-control" name="mid">
                        <c:forEach items="${meetingList}" var="meeting">
                            <option value="${meeting.id}">${meeting.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>
            <div style="display: none" id="prompt1" class="form-group">
                <span style="color:red;text-align: center" id="msg" class="col-sm-12"></span>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">开始日期时间:</label>
                <div class="col-sm-5">
                    <input id="start" type="datetime-local" class="form-control" name="starttime" onblur="inspect()">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">结束日期时间:</label>
                <div class="col-sm-5">
                    <input id="end" type="datetime-local" class="form-control" name="endtime" onblur="inspect()">
                </div>
            </div>
            <div class="form-group">
                <label for="inputNum" class="col-sm-3 control-label">主题:</label>
                <div class="col-sm-9">
                    <input type="text" name="title" class="form-control" id="inputNum" placeholder="请填写会议主题">
                </div>
            </div>
            <div class="form-group">
                <label for="inputAddress" class="col-sm-3 control-label">预约人:</label>
                <div class="col-sm-9">
                    <input type="text" name="applypeo" class="form-control" id="inputAddress" placeholder="请填写你的姓名和手机号">
                </div>
            </div>
            <div class="form-group">
                <label for="inputRem" class="col-sm-3 control-label">备注:</label>
                <div class="col-sm-9">
                    <textarea id="inputRem" name="remarks" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-10">
                    <button id="button" type="submit" class="btn btn-default" disabled="disabled">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    function dateToString(date){
        let year = date.getFullYear();
        let month = date.getMonth()+1;
        let day = date.getDate();
        if (month < 10){month = "0"+month};
        if (day < 10){day = "0"+day};
        return year+"-"+month+"-"+day+"T08:00";
    }
    let start = document.getElementById("start");
    let end = document.getElementById("end");
    let span = document.getElementById("msg");
    let select = document.getElementById("meetingList");
    let button = document.getElementById("button");
    let div = document.getElementById("prompt1");

    start.value = dateToString(new Date());
    end.value = dateToString(new Date());

    /*start.onblur = inspect();
    end.onblur = inspec();*/

     function inspect() {
        let ajax2;
        if(window.XMLHttpRequest){
            ajax2 = new XMLHttpRequest();
        }else {
            ajax2 = new ActiveXObject("Microsoft.XMLHttp");
        }
        ajax2.onreadystatechange = function () {
            console.log(ajax2.readyState);
            console.log(ajax2.status);
            if(ajax2.readyState == 4 && ajax2.status == 200){
                let result = ajax2.responseText;
                if (result != "ok"){
                    div.style.display = "block";
                    button.disabled="disabled";
                    span.innerHTML = result;
                }else {
                    div.style.display = "none"
                    button.disabled = "";
                }
            }
        }
        ajax2.open("post","datetimeVer")
        ajax2.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        ajax2.send("start="+start.value+"&end="+end.value+"&mid="+select.value);
    }

</script>
<script>
    let ajax;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
    }else {
        ajax = new ActiveXObject("Microsoft.XMLHttp");
    }
    ajax.onreadystatechange = function () {
        if(ajax.readyState == 4 && ajax.status == 200){
            let json = ajax.responseText;
            let meetingList = JSON.parse(json);
            let selectElement = document.getElementById("meetingList");
            for(let i = 0;i < meetingList.length;i++){
               let option = document.createElement("option");
               option.value = meetingList[i].id;
               option.innerHTML = meetingList[i].name;
               selectElement.append(option);
            }
        }
    }
    ajax.open("get","findAllMeeting");
    ajax.send()
</script>
</body>
</html>
